<template>
	<view class="videofilter"  @click="openShare()">设置视频分辨率</view>
	<view >
		
		<video id="video" width="400" height="300"  autoPlay playsInline></video>
		<uni-section title="动态改变分辨率" type="line">
		      <uni-data-select
		        v-model="value"
		        :localdata="range"
		        @change="change"
		        :clear="false"
		      ></uni-data-select>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myVideo : '',
				mediaOpts : {
					  video: " { width: { exact: 640 }, height: { exact: 480 } }"
				},
				optsList : [
					"{ width: { exact: 320 }, height: { exact: 240 } }",
					"{ width: { exact: 640 }, height: { exact: 480 } }",
					"{ width: { exact: 1280 }, height: { exact: 720 } }",
					"{ width: { exact: 1920 }, height: { exact: 1080 } }",
					"{ width: { exact: 2560 }, height: { exact: 1440 } }",
					"{ width: { exact: 4096 }, height: { exact: 2160 } }",
					"{ width: { exact: 7680 }, height: { exact: 4320 } }"
				],
				value:"qvga",
				range: [
					{ value: "0", text: "qvga" },
					{ value: "1", text: "vga" },
					{ value: "2", text: "hd" },
					{ value: "3", text: "fullHd" },
					{ value: "4", text: "2k" },
					{ value: "5", text: "4k" },
					{ value: "6", text: "8k" },
				],
			}
		},
		onLoad() {
			this.openShare();
		},
		methods: {
			change(e){
				console.log(this.optsList[e]);
				console.log(window.stream.getVideoTracks());
				var track = window.stream.getVideoTracks()[0];
				var constraints = {
					  video: this.optsList[e]
				}
				track.applyConstraints(constraints)
				.then(() => {
					console.log("动态改变分辨率成功...");
				}).catch(err => {
					console.log("动态改变分辨率错误...",err.name);
				})
					
			},
			async openShare(e){
				try{
					const stream = await navigator.mediaDevices.getUserMedia(this.mediaOpts);
					console.log('success');
					this.handleSuccess(stream);
					
				}catch(e){
					this.handleError(e);
				}
			},
				handleSuccess(stream){
					this.myVideo = document.querySelector('video')
					const videoTracks = stream.getVideoTracks();
					console.log("myvidio=",this.myVideo)
					console.log('使用的设备是:' + videoTracks[0].label);
			        window.stream = stream;
			        this.myVideo.srcObject = stream;
			    },
			
			    handleError(error){
			        console.log(error);
			    },
		}
	}
</script>

<style>

</style>
